<template>
  <div style="margin:10px;" class="rklbDiv">
    <el-row>
      <el-col :span="12" ><div class="grid-content bg-purple"  style="width: 98%;margin:0 auto;">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="姓名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.idCard" placeholder="身份证号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t('handle.search') }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      @current-change="handleCurrentChange"
      v-loading="dataListLoading">
      <el-table-column
        type="index"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        header-align="center"
        prop="name"
        align="center"
        :label="$t('form.name')">
      </el-table-column>
      <el-table-column
        prop="sexText"
        header-align="center"
        align="center"
       :label="$t('form.sex')">
      </el-table-column>
      <el-table-column
        prop="identityNumber"
        header-align="center"
        align="center"
        label="公民身份号码">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
      </div></el-col>
      <el-col :span="12" ><div class="grid-content bg-purple-light">
        <el-card class="box-card" style="margin-top:57px;">
          <div slot="header" class="clearfix">
            <span>详细信息</span>
          </div>
          <div class="text item" style="height:600px;overflow-y: auto;overflow-x:visible;">
            <el-collapse v-model="activeName" accordion style="width: 94%;margin:0 auto;">
              <el-collapse-item title="基本信息" name="1">
                <el-form :model="dataForm"  ref="dataForm"  label-width="80px">
                  <el-row>
                      <el-col :span="12">
                      <el-form-item label="人口类别" prop="managementCategory">
                        <el-input :disabled="true" v-model="dataForm.managementCategory" placeholder="人口类别" ></el-input>
                      </el-form-item>
                      </el-col>
                        <el-col :span="12">
                      <el-form-item label="身份证号" prop="identityNumber">
                        <el-input :disabled="true" v-model="dataForm.identityNumber" placeholder="身份证号"></el-input>
                      </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="12">
                    <el-form-item :label="$t('form.name')" prop="name">
                      <el-input :disabled="true" v-model="dataForm.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    </el-col>
                        <el-col :span="12">
                    <el-form-item label="曾用名" prop="usedName">
                      <el-input :disabled="true" v-model="dataForm.usedName" placeholder="曾用名"></el-input>
                    </el-form-item>
                    </el-col>
                  </el-row>
                    <el-row>
                      <el-col :span="12">
                    <el-form-item label="证件种类" prop="identificationType">
                      <el-input :disabled="true" v-model="dataForm.identificationType" placeholder="证件种类"></el-input>
                    </el-form-item>
                    </el-col>
                        <el-col :span="12">
                    <el-form-item label="证件号码" prop="identificationNumber">
                      <el-input :disabled="true" v-model="dataForm.identificationNumber" placeholder="证件号码"></el-input>
                    </el-form-item>
                    </el-col>
                  </el-row>
                    <el-row>
                      <el-col :span="12">
                    <el-form-item label="外文姓" prop="foreignSurname">
                      <el-input :disabled="true" v-model="dataForm.foreignSurname" placeholder="外文姓"></el-input>
                    </el-form-item>
                    </el-col>
                        <el-col :span="12">
                    <el-form-item label="外文名" prop="foreignName">
                      <el-input :disabled="true" v-model="dataForm.foreignName" placeholder="外文名"></el-input>
                    </el-form-item>
                    </el-col>
                  </el-row>
                    <el-row>
                      <el-col :span="12">
                    <el-form-item :label="$t('form.sex')" prop="sex">
                      <el-input :disabled="true" v-model="dataForm.sex" placeholder="性别"></el-input>
                    </el-form-item>
                    </el-col>
                        <el-col :span="12">
                    <el-form-item label="民族" prop="nation">
                      <el-input :disabled="true" v-model="dataForm.nation" placeholder="民族"></el-input>
                    </el-form-item>
                    </el-col>
                  </el-row>
                    <el-row>
                      <el-col :span="12">
                    <el-form-item :label="$t('form.birthDate')" prop="birthdate">
                      <el-input :disabled="true" v-model="dataForm.birthdate" placeholder="出生日期"></el-input>
                    </el-form-item>
                    </el-col>
                        <el-col :span="12">
                    <el-form-item label="注销类别" prop="logoutCategory">
                      <el-input :disabled="true" v-model="dataForm.logoutCategory" placeholder="人口注销类别"></el-input>
                    </el-form-item>
                        </el-col>
                    </el-row>
                  </el-form>
              </el-collapse-item>
              <el-collapse-item title="单位信息" name="2">

                <el-form :model="dataForm" ref="dataForm"  label-width="100px">
                  <el-form-item label="单位名称" >
                  <el-input :disabled="true" v-model="dataForm.dwname" placeholder="单位名称"></el-input>
                </el-form-item>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="单位属性" >
                        <el-input  :disabled="true" v-model="dataForm.institutions" placeholder="单位属性"></el-input>
                </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="单位类别">
                  <el-input :disabled="true" v-model="dataForm.businessCategory" placeholder="单位类别"></el-input>
                </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="营业执照号" >
                  <el-input :disabled="true" v-model="dataForm.businessLicense" placeholder="营业执照号"></el-input>
                </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="企业注册类型" >
                  <el-input :disabled="true" v-model="dataForm.typeBusiness" placeholder="企业注册类型"></el-input>
                </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                <el-form-item label="控股情况">
                  <el-input :disabled="true" v-model="dataForm.holdings" placeholder="控股情况"></el-input>
                </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="经营范围">
                  <el-input :disabled="true" v-model="dataForm.businessScope" placeholder="经营范围"></el-input>
                </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
            <el-form-item label="是否有监控">
                  <el-input :disabled="true" v-model="dataForm.monitoring" placeholder="是否有监控"></el-input>
                </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="标准地址id" prop="addressId">
                  <el-input :disabled="true" v-model="dataForm.addressId" placeholder="标准地址id"></el-input>
                </el-form-item>
                    </el-col>
                  </el-row>

                </el-form>

              </el-collapse-item>
              <el-collapse-item title="标准地址" name="3">

              </el-collapse-item>
              <el-collapse-item title="人像信息" name="4">

              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      activeName: '1',
      dataForm: {
        key: '',
        idCard: '',
        // 人口信息
        populationCoding: 0,
        managementCategory: '',
        identityNumber: '',
        name: '',
        usedName: '',
        identificationType: '',
        identificationNumber: '',
        foreignSurname: '',
        foreignName: '',
        sex: '',
        nation: '',
        birthdate: '',
        logoutCategory: '',
        unitId: '',
        unitIdText: '',
        addressId: '',
        portraitId: '',
        // 单位信息
        dwname: '',
        institutions: '',
        businessCategory: '',
        typeBusiness: '',
        holdings: '',
        businessScope: '',
        monitoring: '',
        businessLicense: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false
    }
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        // url: this.$http.adornUrl('/standardinfo/dgactualpopulation/list'),
        url: '/dg-standard-info/standardinfo/dgactualpopulation/list',
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'name': this.dataForm.key,
          'idCard': this.dataForm.idCard
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    handleCurrentChange (currentRow, oldCurrentRow) {
      console.log(currentRow)
      this.getactualpopulationMsaage(currentRow.populationCoding)
      this.getUnitMessage(currentRow.unitId)
      this.activeName = '1'
    },
    getactualpopulationMsaage (id) {
      this.$http({
        // url: this.$http.adornUrl(`/standardinfo/dgactualpopulation/info/` + id),
         url: `/dg-standard-info/standardinfo/dgactualpopulation/info/` + id,
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataForm.managementCategory = data.dgActualPopulation.managementCategoryText
          this.dataForm.identityNumber = data.dgActualPopulation.identityNumber
          this.dataForm.name = data.dgActualPopulation.name
          this.dataForm.usedName = data.dgActualPopulation.usedName
          this.dataForm.identificationType = data.dgActualPopulation.identificationTypeText
          this.dataForm.identificationNumber = data.dgActualPopulation.identificationNumber
          this.dataForm.foreignSurname = data.dgActualPopulation.foreignSurname
          this.dataForm.foreignName = data.dgActualPopulation.foreignName
          this.dataForm.sex = data.dgActualPopulation.sexText
          this.dataForm.nation = data.dgActualPopulation.nationText
          this.dataForm.birthdate = data.dgActualPopulation.birthdate
          this.dataForm.logoutCategory = data.dgActualPopulation.logoutCategoryText
          this.dataForm.unitId = data.dgActualPopulation.unitId
          this.dataForm.addressId = data.dgActualPopulation.addressId
          this.dataForm.portraitId = data.dgActualPopulation.portraitId
        }
      })
    },
    getUnitMessage (id) {
      this.$http({
        // url: this.$http.adornUrl(`/standardinfo/dgactualunit/info/` + id),
        url: `/dg-standard-info/standardinfo/dgactualunit/info/` + id,
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataForm.dwname = data.dgActualUnit.name
          this.dataForm.institutions = data.dgActualUnit.institutionsText
          this.dataForm.businessCategory = data.dgActualUnit.businessCategoryText
          this.dataForm.typeBusiness = data.dgActualUnit.typeBusinessText
          this.dataForm.holdings = data.dgActualUnit.holdingsText
          this.dataForm.businessScope = data.dgActualUnit.businessScopeText
          this.dataForm.monitoring = data.dgActualUnit.monitoringText
          this.dataForm.businessLicense = data.dgActualUnit.businessLicense
          this.dataForm.addressId = data.dgActualUnit.addressId
        }
      })
    }
  },
  mounted () {
    this.getDataList()
  }
}
</script>

<style>
/* el-collapse-item开头的为折叠面板的样式 */
.el-collapse-item__header {
    height: 70px;
    line-height: 70px;
    font-size: 15px;
}
.el-collapse-item__arrow {
    line-height: 70px;
    font-weight: 500;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.box-card {
    width: 98%;
}
/* 折叠面板打开时出现的样式 */
.el-collapse-item__header.is-active {
    color:#45c2b5;

}
/* 表格行点击时出现的样式 */
/* .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .rklbDiv .el-table__body tr.current-row>td, .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td { */
    /* background-color: #409EFF;
    color: white; */
/* } */
/* 表格鼠标放到行上的样式 */
.el-table--enable-row-hover .el-table__body tr:hover>td {
    /* background-color: #409EFF;
    color: #000; */
    cursor:pointer;
}

.el-form-item__label {
    text-align: center;
}
.el-input.is-disabled .el-input__inner {
    color: #606266;
}
</style>

